<!-- 商品规格 -->
<template>
	<view class="norms pr" v-show="showNorms">
		<!-- 遮罩层 -->
		<view class="closePop pf" @click="closeNorms"></view>
		<view class="card pf">
			<scroll-view scroll-y="true" :class="platform == 'ios'? 'changeIosHeight' : 'changeAndHeight'">
				<view class="product">
					<image :src="goods.pic_url0" mode=""></image>
					<view class="text">
						<view class="name">{{goods.spu_name}}</view>
						<view class="num">{{goods.points || '暂无'}}积分</view>
					</view>
				</view>
				<!-- 规格 -->
				<view class="nortitle">请选择规格</view>
				<view class="list">
					<view class="name"
						:class="items.stock_insufficiency? 'select_gary' :index  === selectAct? 'chageBorder' : ''"
						v-for="(item,index) in goods.giftSkus" :key="index">
						<view class="" @click="selectNorms(item,index)">{{item.display_string}}</view>
					</view>
				</view>
				<!-- 规格 -->
				<view class="nortguige" :class="{'chageTop': isShowBtn == 2}">
					<view class="nortitle">请选择数量</view>
					<!-- 数量框 -->
					<view class="card_calculation">
						<number ref="cartChild" @change_num="change_num"></number>
					</view>
				</view>
				<template v-if="isShowBtn !=2">
					<view class="isShowBtn">
						<!-- 积分抵扣 -->
						<view class="points_title">请选择积分抵扣</view>
						<!-- 积分抵扣框 -->
						<view class="x-bc points">
							<input class="" type="number" placeholder="请输入积分抵扣" v-model="points" />
							<view class="money tr">还需支付¥{{money}}元</view>
						</view>
					</view>
				</template>

			</scroll-view>
				<!-- 确定 -->
				<view class="deterMineTop"></view>
				<view class="determine x-c pf" @click="deterMine(goods)">确认</view>
		</view>
	</view>
</template>

<script>
	import number from './numberBox.vue'
	import {
		mapState
	} from 'vuex';
	export default {
		components: {
			number
		},
		data() {
			return {
				showNorms: false, //是否显示
				selectAct: -1, // 规格选择下标
				isShow: false,
				value: 1, //步进器的值
				points: null, // 当前输入积分
				money: null, // 需要补的金额
				obj: [], // 金额+积分
			}
		},
		props: {
			platform: {
				type: String,
				default: 'ios'
			},
			isShowBtn: {
				type: Number,
				default: 0
			},
		},
		computed: {
			...mapState({
				goods: state => state.goods.goodsInfo, // 商品信息
				userpoints: state => state.user.user.points, // 用户积分
				surplusPoints: state => state.init.points, // 用户剩余积分
			})
		},
		onLoad() {

		},
		onShow() {
			this.cart_money();
		},
		// 修改部分
		watch: {
			points(newVal, oldVal) {
				// 所需总积分 = 商品积分 * 商品数量;
				this.goodsPoints = this.goods.points * this.value;
				// 新积分等于商品积分；
				if (newVal == this.goods.points) {
					this.points = this.goodsPoints;
					this.money = 0;
					return;
				}
				// 新积分小于等于商品所需的总积分；
				// 低于总积分的部分需要使用实际金额进行支付，支付比例 1000积分 = 1元；
				if (newVal <= this.goodsPoints) {
					this.points = newVal;
					this.money = (this.goodsPoints - newVal) / 1000;
					if (this.money < 0) {
						this.money = 0;
					}
					return;
				} else {
					// 新积分大于商品所需的总积分；
					// 重置积分为商品所需的总积分； 且金额重置为0元；
					this.points = this.goodsPoints;
					this.money = 0;
					return;
				}
				// 构造vuex保存的信息；
				let obj = {
					points: this.points,
					money: this.money
				}
				// 将计算好的值，传递给vuex进行保留
				this.$emit('getMoney', obj)
			},
			// 监听数量
			value(newVal, oldVal) {
				// // console.log(newVal,'new')
				// 积分 * 数量 = 所需的总积分;
				this.goodsPoints = this.goods.points * newVal;
				// 如所需总积分小于用户剩余积分， 则使用所需总积分；
				if (this.goodsPoints < this.surplusPoints) {
					this.points = this.goodsPoints;
				}
				// 如所需总积分大于用户剩余积分，则换算所需的金额；
				if (this.goodsPoints > this.surplusPoints) {
					let integer = parseInt(this.surplusPoints / 100);
					this.points = integer * 100;
					this.money = (this.goodsPoints - this.surplusPoints) / 1000;
					if (this.money < 0) {
						this.money = 0;
					}
				}
				// 构造vuex保存的信息；
				let obj = {
					points: this.points,
					money: this.money
				};
				// 将计算好的值，传递给vuex进行保留；
				this.$emit('getMoney', obj);
			}
		},
		methods: {
			change_num(val) {
				this.value = val
				this.$emit("get_num", this.value)
			},
			// 减少
			reduce() {
				// 商品输了只能小于等于1，
				if (this.value >= 2) {
					this.value--
				}
				if (this.value == 1) {
					this.value = 1;
				}
				this.goods.value = this.value
			},
			// 增加
			add() {
				this.value++;
				this.goods.value = this.value
			},
			// 关闭规格弹窗
			closeNorms() {
				// 恢复规格参数
				this.$refs.cartChild.$data.value = 1
				this.value = 1;
				this.selectAct = -1
				this.$emit('getNorm', null)
				this.showNorms = false
				this.$emit('closeNorms')
			},

			// 选择规格
			selectNorms(item, index) {
				if (this.selectAct != index) {
					this.selectAct = index
					this.$emit('getNorm', item)
				} else {
					this.selectAct = -1
					this.$emit('getNorm', null)
				}
			},
			// 计算积分 - 金额
			cart_money() {
				let userpoints = this.userpoints; // 获取用户积分
				let points = this.goods.points; // 获取商品积分
				let value = this.$refs.cartChild.$data.value; // 获取商品数量
				/**
				 * 首先判断是否有用户积分.
				 * 在判断 用户积分是否大于 商品积分乘以数量
				 * 
				 */
				// 首先判断用户积分是否为空
				if (userpoints) {
					// 判断用户积分是否大于商品积分
					if (userpoints < points * value) {
						// 对用户积分进行取整
						let integer = parseInt(this.userpoints / 100);
						this.points = integer * 100;
						// 计算是否需要支付金额
						this.money = (this.goods.points - this.points) / 1000;
					} else {
						this.points = this.goods.points;
						this.money = 0;
					}
				} else {
					// 如果用户积分为0,则进入这里
					this.points = 0;
					this.money = (this.goods.points - this.points) / 1000;
				}
				let obj = {};
				obj.points = this.points;
				obj.money = this.money
				this.$emit('getMoney', obj)
			},

			// 确定
			deterMine(val) {
				// 判断输入的积分是否大于用户剩余积分；
				if (this.points > this.surplusPoints) {
					this.$tools.toast('输入积分大于用户剩余积分');
					return;
				}
				if (this.points % 100 != 0) {
					this.$tools.toast('请输入100为单位的整数')
					return;
				}
				this.obj.points = this.points
				this.obj.money = this.money
				this.obj.num = this.value
				// 恢复规格参数
				this.$refs.cartChild.$data.value = 1
				this.value = 1;
				this.$emit('summitInfo', this.obj)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.deterMineTop {
		margin-top: 100rpx;
	}
	.changeIosHeight {
		height: 60vh;
		overflow: hidden;
	}

	.changeAndHeight {
		height: 60vh;
		overflow: hidden;
	}

	.numberBox {
		display: flex;
		width: 154rpx;
		border: 1px solid #a3a3a3;
		border-radius: 10rpx;
		margin-left: 20rpx;
		height: 40rpx;
		line-height: 40rpx;

		.reduce {
			width: 40rpx;
			border-right: 1px solid #a3a3a3;
			height: 100%;
		}

		.value {
			flex: 1;
		}

		.add {
			width: 40rpx;
			border-left: 1px solid #a3a3a3;
			height: 100%;
		}
	}

	.select_gary {
		border: 1px dashed #999999 !important;
		color: #999999 !important;
	}

	.chageBorder {
		background: #FF6049;
		color: #FFF !important;
	}

	// 规格弹窗
	.norms {
		width: 100%;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		background-color: rgba(#000, 0.7);
		z-index: 999;

		.closePop {
			top: 0;
			left: 0;
			right: 0;
			height: 100%;
			background-color: rgba(#000, 0.7);
		}

		.card {
			background: #fff;
			bottom: 0;
			right: 0;
			left: 0;
			padding: 40rpx 26rpx;

			.product {
				font-size: 28rpx;
				display: flex;

				image {
					border-radius: 8rpx;
					width: 160rpx;
					height: 160rpx;
				}

				.text {
					padding: 5rpx 0 0 18rpx;

					.name {
						width: 490rpx;
						color: #333;
						line-height: 40rpx;
					}

					.num {
						padding-top: 16rpx;
						color: #ff504c;
					}
				}
			}

			// 规格
			.nortitle {
				padding: 40rpx 0 16rpx 0;
				color: #333;
				font-size: 30rpx;
			}

			.list {
				display: flex;
				flex-wrap: wrap;

				.name {
					margin: 16rpx 0 0 16rpx;
					padding: 20rpx 30rpx;
					border: 2rpx solid #ddd;
					border-radius: 3px;
					font-size: 24rpx;
					color: #666;
				}
			}

			.determine {
				left: 24rpx;
				right: 24rpx;
				bottom: 30rpx;
				// padding: 40rpx 24rpx;
				height: 88rpx;
				// width: 100%;
				background: linear-gradient(269deg, #ff977b 5%, #ff2d1b 95%);
				border-radius: 44rpx;
				font-size: 28rpx;
				color: #fff;
				line-height: 28rpx;
			}
		}
	}

	.points_title {
		padding-top: 40rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #333;
	}

	.points {
		margin-top: 24rpx;
		background: #f5f5f5;
		border-radius: 16rpx;
		padding: 24rpx 26rpx;
		font-size: 28rpx;
		margin-bottom: 50rpx;

		.money {
			color: #FF2D1B;
		}
	}

	.chageTop {
		margin-bottom: 70rpx;
	}

	.scroll {
		height: 1000px;
	}
</style>
